<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站签到页面样式集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B21B6;
      --secondary: #EC4899;
      --accent: #F59E0B;
      --success: #10B981;
      --dark: #1F2937;
      --light: #F9FAFB;
      --white: #FFFFFF;
      --gray: #6B7280;
      --light-gray: #E5E7EB;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      --gradient-primary: linear-gradient(135deg, #5B21B6, #EC4899);
      --gradient-secondary: linear-gradient(135deg, #F59E0B, #EA580C);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #FAF5FF;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      position: relative;
      overflow: hidden;
    }
    
    /* 签到页面容器 */
    .checkin-page {
      display: none;
      padding-bottom: 20px;
    }
    
    .checkin-page.active {
      display: block;
      animation: fadeIn 0.5s ease;
    }
    
    /* 通用样式 */
    .page-header {
      padding: 24px 16px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    
    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
    }
    
    .header-content {
      position: relative;
      z-index: 1;
      color: var(--white);
    }
    
    .page-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .page-subtitle {
      font-size: 14px;
      opacity: 0.9;
    }
    
    .content {
      padding: 0 16px;
    }
    
    .btn {
      display: block;
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 12px;
    }
    
    .btn-primary {
      background: var(--gradient-primary);
      color: white;
      box-shadow: 0 4px 15px rgba(91, 33, 182, 0.3);
    }
    
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(91, 33, 182, 0.4);
    }
    
    .btn-secondary {
      background: var(--gradient-secondary);
      color: white;
      box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    }
    
    .btn-outline {
      background-color: transparent;
      color: var(--primary);
      border: 1px solid var(--primary);
    }
    
    .btn-outline:hover {
      background-color: rgba(91, 33, 182, 0.05);
    }
    
    .section {
      margin-bottom: 24px;
      background-color: var(--white);
      border-radius: 16px;
      padding: 20px;
      box-shadow: var(--shadow);
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .section-title i {
      color: var(--primary);
    }
    
    /* 签到状态卡片 */
    .checkin-status {
      background: var(--gradient-primary);
      border-radius: 16px;
      padding: 20px;
      color: white;
      text-align: center;
      margin-bottom: 24px;
      box-shadow: 0 10px 30px rgba(91, 33, 182, 0.2);
    }
    
    .streak-count {
      font-size: 36px;
      font-weight: 700;
      margin: 10px 0;
    }
    
    .streak-label {
      font-size: 16px;
      opacity: 0.9;
    }
    
    .next-reward {
      margin-top: 16px;
      font-size: 14px;
      background-color: rgba(255, 255, 255, 0.2);
      padding: 8px 16px;
      border-radius: 20px;
      display: inline-block;
    }
    
    /* 1. 日历式签到样式 */
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
      margin-bottom: 24px;
    }
    
    .calendar-day {
      aspect-ratio: 1/1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      position: relative;
    }
    
    .calendar-day.weekday {
      color: var(--gray);
      font-size: 12px;
      font-weight: normal;
    }
    
    .calendar-day.unchecked {
      background-color: var(--light);
      color: var(--dark);
      cursor: pointer;
    }
    
    .calendar-day.unchecked:hover {
      background-color: var(--light-gray);
    }
    
    .calendar-day.checked {
      background-color: var(--primary);
      color: white;
      position: relative;
    }
    
    .calendar-day.checked:after {
      content: "✓";
      position: absolute;
      font-size: 16px;
    }
    
    .calendar-day.today {
      border: 2px solid var(--accent);
      color: var(--accent);
      background-color: white;
    }
    
    .calendar-day.disabled {
      background-color: #F3F4F6;
      color: #D1D5DB;
      cursor: not-allowed;
    }
    
    /* 2. 进度条式签到样式 */
    .progress-container {
      margin: 30px 0;
    }
    
    .progress-steps {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      position: relative;
    }
    
    .progress-steps:before {
      content: '';
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      height: 4px;
      background-color: var(--light-gray);
      z-index: 1;
    }
    
    .progress-bar-fill {
      position: absolute;
      top: 15px;
      left: 15px;
      height: 4px;
      background: var(--gradient-primary);
      z-index: 2;
      transition: width 0.5s ease;
    }
    
    .progress-step {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: white;
      border: 2px solid var(--light-gray);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      z-index: 3;
    }
    
    .progress-step.completed {
      background: var(--gradient-primary);
      border-color: var(--primary);
      color: white;
    }
    
    .progress-step.current {
      border-color: var(--primary);
      color: var(--primary);
    }
    
    .step-rewards {
      display: flex;
      justify-content: space-between;
      padding: 0 5px;
    }
    
    .step-reward {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 24px;
    }
    
    .reward-icon {
      width: 24px;
      height: 24px;
      background-color: var(--light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
      font-size: 12px;
    }
    
    .step-reward.claimed .reward-icon {
      background: var(--gradient-primary);
      color: white;
    }
    
    .reward-label {
      font-size: 10px;
      color: var(--gray);
      text-align: center;
    }
    
    /* 3. 打卡式签到样式 */
    .checkin-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    
    .checkin-card {
      background-color: var(--light);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .checkin-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    }
    
    .checkin-card.checked {
      background-color: rgba(16, 185, 129, 0.1);
      border: 1px solid var(--success);
    }
    
    .checkin-card.checked:after {
      content: "✓";
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      background-color: var(--success);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
    
    .card-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 12px;
      background-color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    .card-icon i {
      font-size: 24px;
      color: var(--primary);
    }
    
    .card-title {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
    }
    
    .card-points {
      font-size: 12px;
      color: var(--success);
      font-weight: 500;
    }
    
    /* 4. 任务式签到样式 */
    .task-list {
      margin-bottom: 24px;
    }
    
    .task-item {
      display: flex;
      align-items: center;
      padding: 16px;
      background-color: var(--light);
      border-radius: 12px;
      margin-bottom: 12px;
      transition: all 0.2s ease;
    }
    
    .task-item:hover {
      transform: translateX(3px);
    }
    
    .task-checkbox {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 2px solid var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
      cursor: pointer;
    }
    
    .task-checkbox.checked {
      background-color: var(--primary);
      color: white;
    }
    
    .task-info {
      flex: 1;
    }
    
    .task-title {
      font-weight: 500;
      font-size: 15px;
      margin-bottom: 4px;
    }
    
    .task-description {
      font-size: 12px;
      color: var(--gray);
    }
    
    .task-reward {
      background-color: rgba(91, 33, 182, 0.1);
      color: var(--primary);
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 12px;
      flex-shrink: 0;
    }
    
    /* 5. 连续签到奖励样式 */
    .rewards-list {
      display: flex;
      overflow-x: auto;
      gap: 16px;
      padding-bottom: 12px;
      margin-bottom: 24px;
    }
    
    .reward-item {
      min-width: 120px;
      background-color: var(--light);
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      flex-shrink: 0;
      position: relative;
    }
    
    .reward-item.current {
      border: 2px solid var(--accent);
      background-color: white;
      box-shadow: 0 5px 15px rgba(245, 158, 11, 0.1);
    }
    
    .reward-item.claimed {
      background-color: rgba(16, 185, 129, 0.1);
      border: 1px solid var(--success);
    }
    
    .reward-item.claimed:after {
      content: "已领取";
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: var(--success);
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    
    .reward-days {
      width: 32px;
      height: 32px;
      background-color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
      font-weight: 700;
      font-size: 14px;
      color: var(--primary);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .reward-item.current .reward-days {
      background: var(--gradient-secondary);
      color: white;
    }
    
    .reward-icon-large {
      width: 60px;
      height: 60px;
      margin: 0 auto 12px;
      background-color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    .reward-icon-large img {
      width: 36px;
      height: 36px;
      object-fit: contain;
    }
    
    .reward-name {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
    }
    
    .reward-description {
      font-size: 12px;
      color: var(--gray);
    }
    
    /* 签到成功弹窗 */
    .success-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .success-modal.show {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-content {
      background-color: white;
      border-radius: 20px;
      width: 90%;
      max-width: 320px;
      padding: 30px 20px;
      text-align: center;
      position: relative;
      transform: translateY(30px);
      transition: transform 0.3s ease;
    }
    
    .success-modal.show .modal-content {
      transform: translateY(0);
    }
    
    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 20px;
      color: var(--gray);
      cursor: pointer;
    }
    
    .success-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--success);
    }
    
    .success-icon i {
      font-size: 40px;
    }
    
    .success-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    
    .success-description {
      font-size: 15px;
      color: var(--gray);
      margin-bottom: 24px;
    }
    
    .reward-earned {
      background-color: var(--light);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
    }
    
    .reward-earned-title {
      font-size: 14px;
      color: var(--gray);
      margin-bottom: 8px;
    }
    
    .reward-value {
      font-size: 24px;
      font-weight: 700;
      color: var(--primary);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--light-gray);
      color: var(--dark);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      color: var(--dark);
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    .pulse {
      animation: pulse 2s infinite;
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .page-title {
        font-size: 22px;
      }
      
      .reward-item {
        min-width: 100px;
      }
      
      .reward-icon-large {
        width: 50px;
        height: 50px;
      }
      
      .reward-icon-large img {
        width: 30px;
        height: 30px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">签到页面样式</div>
    <div class="switcher-option active" data-style="1">日历式签到</div>
    <div class="switcher-option" data-style="2">进度条式签到</div>
    <div class="switcher-option" data-style="3">打卡式签到</div>
    <div class="switcher-option" data-style="4">任务式签到</div>
    <div class="switcher-option" data-style="5">连续签到奖励</div>
  </div>
  
  <!-- 签到成功弹窗 -->
  <div class="success-modal" id="successModal">
    <div class="modal-content">
      <button class="modal-close" id="modalClose"><i class="fa fa-times"></i></button>
      <div class="success-icon">
        <i class="fa fa-check"></i>
      </div>
      <h3 class="success-title">签到成功！</h3>
      <p class="success-description" id="successDescription">
        恭喜您完成今日签到，获得相应奖励
      </p>
      <div class="reward-earned">
        <div class="reward-earned-title">获得奖励</div>
        <div class="reward-value" id="rewardValue">50积分</div>
      </div>
      <button class="btn btn-primary" id="continueBtn">继续浏览</button>
    </div>
  </div>
  
  <div class="container">
    <!-- 1. 日历式签到样式 -->
    <div class="checkin-page active" id="style1">
      <div class="page-header">
        <div class="header-bg" style="background: var(--gradient-primary);"></div>
        <div class="header-content">
          <h1 class="page-title">每日签到</h1>
          <p class="page-subtitle">连续签到获取更多奖励</p>
        </div>
      </div>
      
      <div class="content">
        <div class="checkin-status">
          <div>当前连续签到</div>
          <div class="streak-count">5天</div>
          <div class="streak-label">再签2天可获得额外奖励</div>
          <div class="next-reward">
            <i class="fa fa-gift"></i> 下一个奖励: 100积分 + 优惠券
          </div>
        </div>
        
        <button class="btn btn-primary" id="checkinBtn1">今日签到 +50积分</button>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-calendar"></i> 本月签到日历
          </h2>
          <div class="calendar-grid">
            <div class="calendar-day weekday">一</div>
            <div class="calendar-day weekday">二</div>
            <div class="calendar-day weekday">三</div>
            <div class="calendar-day weekday">四</div>
            <div class="calendar-day weekday">五</div>
            <div class="calendar-day weekday">六</div>
            <div class="calendar-day weekday">日</div>
            
            <div class="calendar-day checked">1</div>
            <div class="calendar-day checked">2</div>
            <div class="calendar-day checked">3</div>
            <div class="calendar-day checked">4</div>
            <div class="calendar-day checked">5</div>
            <div class="calendar-day checked">6</div>
            <div class="calendar-day checked">7</div>
            
            <div class="calendar-day checked">8</div>
            <div class="calendar-day checked">9</div>
            <div class="calendar-day today">10</div>
            <div class="calendar-day unchecked">11</div>
            <div class="calendar-day unchecked">12</div>
            <div class="calendar-day unchecked">13</div>
            <div class="calendar-day unchecked">14</div>
            
            <div class="calendar-day unchecked">15</div>
            <div class="calendar-day unchecked">16</div>
            <div class="calendar-day unchecked">17</div>
            <div class="calendar-day unchecked">18</div>
            <div class="calendar-day unchecked">19</div>
            <div class="calendar-day unchecked">20</div>
            <div class="calendar-day unchecked">21</div>
            
            <div class="calendar-day disabled">22</div>
            <div class="calendar-day disabled">23</div>
            <div class="calendar-day disabled">24</div>
            <div class="calendar-day disabled">25</div>
            <div class="calendar-day disabled">26</div>
            <div class="calendar-day disabled">27</div>
            <div class="calendar-day disabled">28</div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-gift"></i> 签到奖励
          </h2>
          <div class="rewards-list">
            <div class="reward-item claimed">
              <div class="reward-days">7</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/24/100" alt="咖啡券">
              </div>
              <div class="reward-name">咖啡券</div>
            </div>
            <div class="reward-item current">
              <div class="reward-days">14</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/26/100" alt="100积分">
              </div>
              <div class="reward-name">100积分</div>
            </div>
            <div class="reward-item">
              <div class="reward-days">21</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/27/100" alt="20元代金券">
              </div>
              <div class="reward-name">20元代金券</div>
            </div>
            <div class="reward-item">
              <div class="reward-days">30</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/21/100" alt="会员体验">
              </div>
              <div class="reward-name">会员体验</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 2. 进度条式签到样式 -->
    <div class="checkin-page" id="style2">
      <div class="page-header">
        <div class="header-bg" style="background: linear-gradient(135deg, #3B82F6, #6366F1);"></div>
        <div class="header-content">
          <h1 class="page-title">签到打卡</h1>
          <p class="page-subtitle">完成7天签到，赢取终极大奖</p>
        </div>
      </div>
      
      <div class="content">
        <div class="progress-container">
          <div class="progress-steps">
            <div class="progress-bar-fill" style="width: 57%;"></div>
            <div class="progress-step completed">1</div>
            <div class="progress-step completed">2</div>
            <div class="progress-step completed">3</div>
            <div class="progress-step completed">4</div>
            <div class="progress-step current">5</div>
            <div class="progress-step">6</div>
            <div class="progress-step">7</div>
          </div>
          
          <div class="step-rewards">
            <div class="step-reward claimed">
              <div class="reward-icon">
                <i class="fa fa-point"></i>
              </div>
              <div class="reward-label">10积分</div>
            </div>
            <div class="step-reward claimed">
              <div class="reward-icon">
                <i class="fa fa-point"></i>
              </div>
              <div class="reward-label">20积分</div>
            </div>
            <div class="step-reward claimed">
              <div class="reward-icon">
                <i class="fa fa-gift"></i>
              </div>
              <div class="reward-label">小礼品</div>
            </div>
            <div class="step-reward claimed">
              <div class="reward-icon">
                <i class="fa fa-point"></i>
              </div>
              <div class="reward-label">30积分</div>
            </div>
            <div class="step-reward">
              <div class="reward-icon">
                <i class="fa fa-point"></i>
              </div>
              <div class="reward-label">50积分</div>
            </div>
            <div class="step-reward">
              <div class="reward-icon">
                <i class="fa fa-ticket"></i>
              </div>
              <div class="reward-label">优惠券</div>
            </div>
            <div class="step-reward">
              <div class="reward-icon">
                <i class="fa fa-trophy"></i>
              </div>
              <div class="reward-label">终极大奖</div>
            </div>
          </div>
        </div>
        
        <button class="btn btn-primary" id="checkinBtn2">完成第5天签到</button>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-info-circle"></i> 活动规则
          </h2>
          <div style="font-size: 14px; color: var(--gray);">
            <p>• 连续签到7天可获得全部奖励</p>
            <p>• 漏签1天将重新开始计数</p>
            <p>• 第7天签到可获得终极大奖</p>
            <p>• 活动期间内可参与一次</p>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-users"></i> 好友排名
          </h2>
          <div style="font-size: 14px;">
            <div style="display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--light-gray);">
              <div style="width: 24px; text-align: center; font-weight: 600; color: var(--accent);">1</div>
              <div style="flex: 1; padding: 0 10px;">
                <div style="font-weight: 500;">张三</div>
                <div style="font-size: 12px; color: var(--gray);">连续签到7天</div>
              </div>
              <div style="color: var(--primary); font-weight: 600;">已领奖</div>
            </div>
            <div style="display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--light-gray);">
              <div style="width: 24px; text-align: center; font-weight: 600; color: #9CA3AF;">2</div>
              <div style="flex: 1; padding: 0 10px;">
                <div style="font-weight: 500;">李四</div>
                <div style="font-size: 12px; color: var(--gray);">连续签到6天</div>
              </div>
              <div style="color: var(--gray);">进行中</div>
            </div>
            <div style="display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--light-gray);">
              <div style="width: 24px; text-align: center; font-weight: 600; color: #9CA3AF;">3</div>
              <div style="flex: 1; padding: 0 10px;">
                <div style="font-weight: 500;">王五</div>
                <div style="font-size: 12px; color: var(--gray);">连续签到5天</div>
              </div>
              <div style="color: var(--gray);">进行中</div>
            </div>
            <div style="display: flex; align-items: center; padding: 10px 0;">
              <div style="width: 24px; text-align: center; font-weight: 600; color: #9CA3AF;">4</div>
              <div style="flex: 1; padding: 0 10px;">
                <div style="font-weight: 500;">我</div>
                <div style="font-size: 12px; color: var(--gray);">连续签到4天</div>
              </div>
              <div style="color: var(--gray);">进行中</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 3. 打卡式签到样式 -->
    <div class="checkin-page" id="style3">
      <div class="page-header">
        <div class="header-bg" style="background: linear-gradient(135deg, #10B981, #059669);"></div>
        <div class="header-content">
          <h1 class="page-title">每日打卡</h1>
          <p class="page-subtitle">完成不同任务，获取相应奖励</p>
        </div>
      </div>
      
      <div class="content">
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-tasks"></i> 今日可打卡任务
          </h2>
          <div class="checkin-cards">
            <div class="checkin-card checked" id="card1">
              <div class="card-icon">
                <i class="fa fa-sign-in"></i>
              </div>
              <div class="card-title">每日签到</div>
              <div class="card-points">+30积分</div>
            </div>
            <div class="checkin-card" id="card2">
              <div class="card-icon">
                <i class="fa fa-comment"></i>
              </div>
              <div class="card-title">发表评论</div>
              <div class="card-points">+20积分</div>
            </div>
            <div class="checkin-card" id="card3">
              <div class="card-icon">
                <i class="fa fa-share-alt"></i>
              </div>
              <div class="card-title">分享内容</div>
              <div class="card-points">+40积分</div>
            </div>
            <div class="checkin-card" id="card4">
              <div class="card-icon">
                <i class="fa fa-user-plus"></i>
              </div>
              <div class="card-title">添加好友</div>
              <div class="card-points">+50积分</div>
            </div>
            <div class="checkin-card" id="card5">
              <div class="card-icon">
                <i class="fa fa-image"></i>
              </div>
              <div class="card-title">上传照片</div>
              <div class="card-points">+60积分</div>
            </div>
            <div class="checkin-card" id="card6">
              <div class="card-icon">
                <i class="fa fa-thumbs-up"></i>
              </div>
              <div class="card-title">点赞5次</div>
              <div class="card-points">+15积分</div>
            </div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-bar-chart"></i> 打卡进度
          </h2>
          <div style="background-color: var(--light); border-radius: 10px; height: 8px; margin-bottom: 8px;">
            <div style="background: var(--gradient-primary); width: 16.67%; height: 100%; border-radius: 10px;"></div>
          </div>
          <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--gray);">
            <div>已完成 1/6 任务</div>
            <div>今日可获得: 215积分</div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-calendar-check-o"></i> 本周打卡统计
          </h2>
          <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
            <div style="text-align: center;">
              <div style="font-size: 24px; font-weight: 700; color: var(--primary);">12</div>
              <div style="font-size: 12px; color: var(--gray);">总完成</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 24px; font-weight: 700; color: var(--primary);">850</div>
              <div style="font-size: 12px; color: var(--gray);">总积分</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 24px; font-weight: 700; color: var(--primary);">3</div>
              <div style="font-size: 12px; color: var(--gray);">连续天数</div>
            </div>
            <div style="text-align: center;">
              <div style="font-size: 24px; font-weight: 700; color: var(--primary);">2</div>
              <div style="font-size: 12px; color: var(--gray);">获得奖励</div>
            </div>
          </div>
          <button class="btn btn-outline">查看详细统计</button>
        </div>
      </div>
    </div>
    
    <!-- 4. 任务式签到样式 -->
    <div class="checkin-page" id="style4">
      <div class="page-header">
        <div class="header-bg" style="background: var(--gradient-secondary);"></div>
        <div class="header-content">
          <h1 class="page-title">签到任务</h1>
          <p class="page-subtitle">完成任务获取签到奖励</p>
        </div>
      </div>
      
      <div class="content">
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-list-alt"></i> 日常任务
          </h2>
          <div class="task-list">
            <div class="task-item">
              <div class="task-checkbox checked" id="task1">
                <i class="fa fa-check"></i>
              </div>
              <div class="task-info">
                <div class="task-title">每日签到</div>
                <div class="task-description">每天登录并完成签到</div>
              </div>
              <div class="task-reward">+20积分</div>
            </div>
            <div class="task-item">
              <div class="task-checkbox" id="task2">
              </div>
              <div class="task-info">
                <div class="task-title">浏览首页1分钟</div>
                <div class="task-description">在首页停留至少1分钟</div>
              </div>
              <div class="task-reward">+10积分</div>
            </div>
            <div class="task-item">
              <div class="task-checkbox" id="task3">
              </div>
              <div class="task-info">
                <div class="task-title">查看3个帖子</div>
                <div class="task-description">完整查看3个不同的帖子内容</div>
              </div>
              <div class="task-reward">+15积分</div>
            </div>
            <div class="task-item">
              <div class="task-checkbox" id="task4">
              </div>
              <div class="task-info">
                <div class="task-title">发布一条动态</div>
                <div class="task-description">分享你的生活或想法</div>
              </div>
              <div class="task-reward">+50积分</div>
            </div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-star"></i> 挑战任务
          </h2>
          <div class="task-list">
            <div class="task-item">
              <div class="task-checkbox" id="task5">
              </div>
              <div class="task-info">
                <div class="task-title">邀请好友注册</div>
                <div class="task-description">成功邀请1位新用户注册</div>
              </div>
              <div class="task-reward">+200积分</div>
            </div>
            <div class="task-item">
              <div class="task-checkbox" id="task6">
              </div>
              <div class="task-info">
                <div class="task-title">连续签到7天</div>
                <div class="task-description">保持连续签到7天不中断</div>
              </div>
              <div class="task-reward">+500积分</div>
            </div>
            <div class="task-item">
              <div class="task-checkbox" id="task7">
              </div>
              <div class="task-info">
                <div class="task-title">获得10个点赞</div>
                <div class="task-description">单条动态获得10个以上点赞</div>
              </div>
              <div class="task-reward">+100积分</div>
            </div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-gift"></i> 今日可领取奖励
          </h2>
          <div style="background-color: var(--light); border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 16px;">
            <div style="font-size: 14px; color: var(--gray); margin-bottom: 8px;">已完成任务可获得</div>
            <div style="font-size: 24px; font-weight: 700; color: var(--primary);">20积分</div>
          </div>
          <button class="btn btn-primary" id="collectRewards">领取今日奖励</button>
        </div>
      </div>
    </div>
    
    <!-- 5. 连续签到奖励样式 -->
    <div class="checkin-page" id="style5">
      <div class="page-header">
        <div class="header-bg" style="background: linear-gradient(135deg, #8B5CF6, #4F46E5);"></div>
        <div class="header-content">
          <h1 class="page-title">连续签到</h1>
          <p class="page-subtitle">坚持签到，赢取丰厚奖励</p>
        </div>
      </div>
      
      <div class="content">
        <div class="checkin-status">
          <div>当前连续签到</div>
          <div class="streak-count">3天</div>
          <div class="streak-label">已获得3份奖励，继续加油！</div>
        </div>
        
        <button class="btn btn-primary" id="checkinBtn5">今日签到 +30积分</button>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-trophy"></i> 连续签到奖励
          </h2>
          <div class="rewards-list">
            <div class="reward-item claimed">
              <div class="reward-days">1</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/28/100" alt="10积分">
              </div>
              <div class="reward-name">10积分</div>
              <div class="reward-description">连续1天</div>
            </div>
            <div class="reward-item claimed">
              <div class="reward-days">2</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/29/100" alt="20积分">
              </div>
              <div class="reward-name">20积分</div>
              <div class="reward-description">连续2天</div>
            </div>
            <div class="reward-item claimed">
              <div class="reward-days">3</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/30/100" alt="30积分">
              </div>
              <div class="reward-name">30积分</div>
              <div class="reward-description">连续3天</div>
            </div>
            <div class="reward-item current">
              <div class="reward-days">4</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/25/100" alt="50积分">
              </div>
              <div class="reward-name">50积分</div>
              <div class="reward-description">连续4天</div>
            </div>
            <div class="reward-item">
              <div class="reward-days">5</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/24/100" alt="优惠券">
              </div>
              <div class="reward-name">5元券</div>
              <div class="reward-description">连续5天</div>
            </div>
            <div class="reward-item">
              <div class="reward-days">6</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/26/100" alt="100积分">
              </div>
              <div class="reward-name">100积分</div>
              <div class="reward-description">连续6天</div>
            </div>
            <div class="reward-item">
              <div class="reward-days">7</div>
              <div class="reward-icon-large">
                <img src="https://picsum.photos/id/27/100" alt="20元券">
              </div>
              <div class="reward-name">20元券</div>
              <div class="reward-description">连续7天</div>
            </div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-lightbulb-o"></i> 签到小贴士
          </h2>
          <div style="font-size: 14px; color: var(--gray);">
            <p>• 每天签到可获得相应奖励，连续签到天数越多，奖励越丰厚</p>
            <p>• 连续签到7天后将重新开始计算，但可获得额外惊喜奖励</p>
            <p>• 漏签可以通过完成指定任务补签</p>
            <p>• 积分可在积分商城兑换实物礼品或优惠券</p>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-exchange"></i> 补签机会
          </h2>
          <div style="text-align: center; padding: 16px; background-color: var(--light); border-radius: 12px; margin-bottom: 16px;">
            <div style="font-size: 14px; margin-bottom: 8px;">您有 <span style="color: var(--primary); font-weight: 600;">1</span> 次补签机会</div>
            <div style="font-size: 12px; color: var(--gray);">补签可延长您的连续签到天数</div>
          </div>
          <button class="btn btn-outline">使用补签机会</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的样式
    let currentStyle = '1';
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const checkinPages = {
      '1': document.getElementById('style1'),
      '2': document.getElementById('style2'),
      '3': document.getElementById('style3'),
      '4': document.getElementById('style4'),
      '5': document.getElementById('style5')
    };
    const successModal = document.getElementById('successModal');
    const modalClose = document.getElementById('modalClose');
    const continueBtn = document.getElementById('continueBtn');
    const successDescription = document.getElementById('successDescription');
    const rewardValue = document.getElementById('rewardValue');
    
    // 签到按钮
    const checkinBtn1 = document.getElementById('checkinBtn1');
    const checkinBtn2 = document.getElementById('checkinBtn2');
    const checkinBtn5 = document.getElementById('checkinBtn5');
    const collectRewards = document.getElementById('collectRewards');
    
    // 打卡卡片
    const checkinCards = [
      document.getElementById('card1'),
      document.getElementById('card2'),
      document.getElementById('card3'),
      document.getElementById('card4'),
      document.getElementById('card5'),
      document.getElementById('card6')
    ];
    
    // 任务复选框
    const taskCheckboxes = [
      document.getElementById('task1'),
      document.getElementById('task2'),
      document.getElementById('task3'),
      document.getElementById('task4'),
      document.getElementById('task5'),
      document.getElementById('task6'),
      document.getElementById('task7')
    ];
    
    // 切换签到页面样式
    function switchStyle(style) {
      // 隐藏所有页面
      Object.values(checkinPages).forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示选中的样式
      if (checkinPages[style]) {
        checkinPages[style].classList.add('active');
        currentStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 显示签到成功弹窗
    function showSuccessModal(rewardText, description) {
      rewardValue.textContent = rewardText;
      successDescription.textContent = description || '恭喜您完成签到，获得相应奖励';
      successModal.classList.add('show');
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchStyle(style);
      });
    });
    
    // 关闭弹窗事件
    modalClose.addEventListener('click', () => {
      successModal.classList.remove('show');
    });
    
    continueBtn.addEventListener('click', () => {
      successModal.classList.remove('show');
    });
    
    // 日历式签到
    checkinBtn1.addEventListener('click', function() {
      this.textContent = '已签到';
      this.disabled = true;
      this.style.opacity = '0.7';
      
      // 更新日历状态
      const today = document.querySelector('#style1 .calendar-day.today');
      today.classList.remove('today');
      today.classList.add('checked');
      
      showSuccessModal('50积分', '恭喜您完成今日签到，连续签到天数变为6天');
    });
    
    // 进度条式签到
    checkinBtn2.addEventListener('click', function() {
      this.textContent = '已完成第5天签到';
      this.disabled = true;
      this.style.opacity = '0.7';
      
      // 更新进度条
      document.querySelector('.progress-bar-fill').style.width = '71%';
      document.querySelector('.progress-step.current').classList.remove('current');
      document.querySelector('.progress-step.current').classList.add('completed');
      document.querySelectorAll('.progress-step')[5].classList.add('current');
      
      // 更新奖励状态
      document.querySelectorAll('.step-reward')[4].classList.add('claimed');
      
      showSuccessModal('50积分', '恭喜您完成第5天签到，再坚持2天可获得终极大奖');
    });
    
    // 打卡式签到卡片点击事件
    checkinCards.forEach((card, index) => {
      if (card && index > 0) { // 跳过已选中的第一个卡片
        card.addEventListener('click', function() {
          if (!this.classList.contains('checked')) {
            this.classList.add('checked');
            
            // 获取积分值
            const pointsText = this.querySelector('.card-points').textContent;
            showSuccessModal(pointsText, '恭喜您完成任务，获得相应积分奖励');
            
            // 更新进度
            updateCheckinProgress();
          }
        });
      }
    });
    
    // 更新打卡进度
    function updateCheckinProgress() {
      const totalCards = checkinCards.length;
      const checkedCards = document.querySelectorAll('#style3 .checkin-card.checked').length;
      const progressPercent = (checkedCards / totalCards) * 100;
      
      document.querySelector('#style3 .section:nth-child(2) .gradient-primary').style.width = `${progressPercent}%`;
      document.querySelector('#style3 .section:nth-child(2) div:last-child div:first-child').textContent = `已完成 ${checkedCards}/${totalCards} 任务`;
    }
    
    // 任务式签到复选框点击事件
    taskCheckboxes.forEach((checkbox, index) => {
      if (checkbox && index > 0) { // 跳过已选中的第一个任务
        checkbox.addEventListener('click', function() {
          if (!this.classList.contains('checked')) {
            this.classList.add('checked');
            this.innerHTML = '<i class="fa fa-check"></i>';
            
            // 获取奖励值
            const rewardText = this.closest('.task-item').querySelector('.task-reward').textContent;
            showSuccessModal(rewardText, '恭喜您完成任务，获得相应奖励');
          }
        });
      }
    });
    
    // 领取奖励按钮
    collectRewards.addEventListener('click', function() {
      showSuccessModal('20积分', '恭喜您领取今日奖励，继续完成任务可获得更多积分');
    });
    
    // 连续签到奖励样式
    checkinBtn5.addEventListener('click', function() {
      this.textContent = '已签到';
      this.disabled = true;
      this.style.opacity = '0.7';
      
      // 更新连续签到天数
      document.querySelector('#style5 .streak-count').textContent = '4天';
      document.querySelector('#style5 .streak-label').textContent = '已获得4份奖励，继续加油！';
      
      // 更新奖励状态
      document.querySelectorAll('#style5 .reward-item')[3].classList.remove('current');
      document.querySelectorAll('#style5 .reward-item')[3].classList.add('claimed');
      document.querySelectorAll('#style5 .reward-item')[4].classList.add('current');
      
      showSuccessModal('30积分', '恭喜您完成今日签到，连续签到天数变为4天');
    });
  </script>
</body>
</html>
